<template>
  <div class="community" :class="{ 'dark-mode': isDarkMode }">
    <header>
      <div class="logo">
        <img src="@/assets/img/logo/logo.png" alt="">
      </div>
      <div class="title">社区</div>
      <i></i>
    </header>

    <div class="community-content">
      <van-tabs v-model:active="currentTab" @change="handleTabChange" class="community-tabs">
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="关注" name="follow"></van-tab>
      </van-tabs>

      <div class="content-wrapper">
        <div class="router-view-container">
          <router-view v-slot="{ Component, route }">
            <transition :name="communityTransitionName">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useDarkModeStore } from '@/stores/darkMode';

const route = useRoute(); // 当前路由
const router = useRouter(); // 路由实例
const darkModeStore = useDarkModeStore();
const isDarkMode = computed(() => darkModeStore.isDarkMode);

// UI状态
const currentTab = ref('recommend'); // 当前选中的标签
const communityTransitionName = ref('slide-left'); // 页面切换动画名称

// 路由切换状态
let lastChildOrder = 0; // 上次子路由的order值

// 获取子路由的order值：用于判断切换方向（Recommend: 0, Follow: 1）
const getChildRouteOrder = (routePath: string): number => {
  if (routePath.includes('/community/Recommend')) {
    return 0;
  }
  if (routePath.includes('/community/Follow')) {
    return 1;
  }
  return 0;
};

// 监听路由变化：同步标签状态并决定切换动画方向
watch(
  () => route.fullPath,
  (newPath, oldPath) => {
    // 仅当处于 /community 下时启用该过渡判断
    if (!route.path.startsWith('/community')) return;

    // 同步标签状态
    if (newPath.includes('/community/Recommend')) {
      currentTab.value = 'recommend';
    } else if (newPath.includes('/community/Follow')) {
      currentTab.value = 'follow';
    }

    // 获取当前路由的 order
    const currentOrder = getChildRouteOrder(newPath);

    // 如果是首次加载或路由初始化，使用默认的 slide-left
    if (oldPath === undefined || oldPath === '' || !oldPath.startsWith('/community')) {
      communityTransitionName.value = 'slide-left';
      lastChildOrder = currentOrder;
      return;
    }

    // 从 oldPath 获取之前的 order
    const previousOrder = getChildRouteOrder(oldPath);

    // 根据order比较决定动画方向
    if (currentOrder > previousOrder) {
      communityTransitionName.value = 'slide-left';
    } else if (currentOrder < previousOrder) {
      communityTransitionName.value = 'slide-right';
    } else {
      communityTransitionName.value = 'slide-left';
    }
    lastChildOrder = currentOrder;
  },
  { immediate: true }
);

// 处理标签切换：根据标签名称跳转到对应路由
const handleTabChange = (name: string) => {
  if (name === 'recommend') {
    router.push('/community/Recommend');
  } else if (name === 'follow') {
    router.push('/community/Follow');
  }
};

</script>

<style scoped lang="less">
.community {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease, color 0.3s ease;

  &.dark-mode {
    background-color: #000;
    color: #fff;
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  box-sizing: border-box;
  background-color: #fff;
  color: #000;
  z-index: 10;
  transition: background-color 0.3s ease, color 0.3s ease;

  .logo {
    height: 50%;

    img {
      height: 100%;
    }
  }

  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 500;
  }
}

.community-content {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 6vh);
  overflow: hidden;
}

.community-tabs {
  position: sticky;
  top: 6vh;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.community.dark-mode {
  header {
    background-color: #000;
    color: #fff;
  }

  .community-tabs {
    background: #000;
    border-bottom-color: #333;

    // 使用深度选择器覆盖 Vant tabs 的内部样式
    :deep(.van-tabs__wrap) {
      background-color: #000;
    }

    :deep(.van-tabs__nav) {
      background-color: #000;
    }

    :deep(.van-tab) {
      color: #fff;
    }

    :deep(.van-tab--active) {
      color: #1989fa;
    }

    :deep(.van-tabs__line) {
      background-color: #1989fa;
    }
  }
}

.content-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.router-view-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  >div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.slide-left-enter-active {
  animation: slide-left-in 0.25s ease-out;
}

.slide-left-leave-active {
  animation: slide-left-out 0.25s ease-in;
}

.slide-right-enter-active {
  animation: slide-right-in 0.25s ease-out;
}

.slide-right-leave-active {
  animation: slide-right-out 0.25s ease-in;
}

@keyframes slide-left-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-left-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-right-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-right-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}
</style>
